<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link red="stylesheet" href="./css/header.css">
    <link rel="stylesheet" href="./css/footer.css">
    <link rel="stylesheet" href="./lib/轮播插件/styles/slider.css">
    <link rel="stylesheet" href="./css/moudule.css">
    <script src="./lib/轮播插件/javascripts/jquery-1.11.0.js"></script>
    <script>

          $(function(){
              $("#banner .category li").mouseenter(function(){
                  $(this).children("p").addClass("active_p")
                  $(this).find("div").addClass("active_div")
              })
              $("#banner .category li").mouseleave(function(){
                  $(this).children("p").removeClass("active_p")
                  $(this).find("div").removeClass("active_div")
              })
          })
    </script>
</head>
<body>
     <!-- 这是头部区域开始 -->
   <div class="box" >
    <div class="header">
        <!-- 这是头部上面区域 -->
       <div class="wrapper header_div1 clearfix">
           <div class="header_content fr">欢迎光临
               <span>乐购，</span>&nbsp;
               请&nbsp; 登陆\
               <span>注册</span>
           </div>
       </div>
   </div>
         <!-- 这是头部下面区域 -->
         <div class="header_div2 wrapper clearfix ">
           <form action="#" class="  f1">
              <input type="text"><button></button>               
          </form>

          <div class="span_div fr "> <a href="#">购物车&nbsp;3</a><a href="#">我的订单</a></div>
         
      </div>

      <div class="header_div3  clearfix wrapper" >
      <ul >
         <li><a href="">电子书</a></li>
         <li><a href="">电子书</a></li>
         <li><a href="">电子书</a></li>
         <li><a href="">电子书</a></li>
         <li><a href="">电子书</a></li>
         <li><a href="">电子书</a></li>
         <li><a href="">电子书</a></li>
         <li><a href="">电子书</a></li>
         <li><a href="">电子书</a></li>
         <li><a href="">电子书</a></li>
         
         <li><a href="">电子书</a></li>
      </ul>
      <img src="./imags/logo.jpg" alt="">
      </div>
     
  </div>
 <!-- 这是头部区域结束 -->
      <!-- 这是轮播图区域 开始-->
                        <div id="banner" class="wrapper clearfix">

                           
                                <!-- 这是左边区域 -->
                    <ul class="category f1">


                     <!-- <li> 
                         <p>这是menu区域</p>
                         <div>这是box1</div>
                     </li>
                     <li> 
                        <p>这是menu区域</p>
                        <div>这是box2</div>
                    </li>
                    <li> 
                        <p>这是menu区域</p>
                        <div>这是box3</div>
                    </li> -->

                    <script>
                let  font1=["图书、电子书、童书",
                          "创意文具",
                           "服饰、内衣",
                          "鞋靴、箱包",
                          "运动户外",
                          "孕、婴、童",
                          "家居、家纺、汽车",
                          "家具、家装、康体",
                          "家居、家纺、汽车",
                          "家具、家装、康体",]
                        let font2=["box1",
                        "box2",
                        "box3",
                        "box4",
                        "box5",
                        "box6",
                        "box7",
                        "box8",
                        "box9",
                        "box10"]
 
                        for(let i=0;i<10;i++){
                      
                          document.write(`  <li> 
                         <p>${font1[i]}</p>
                         <div>${font2[i]}</div>
                     </li>`) }
                    </script>
                    </ul>

                    <!-- 轮播图 -->
                  <div class="slidebox f1">
                       <!--轮播开始-->
				<div class="pptbox" id="bannerInner">
					<!--轮播的内容-->
					<ul class="innerwrapper">
						<li>
							<a href="#"><img src="./lib/轮播插件/images/banner1.jpg" /></a>
						</li>
						<li>
							<a href="#"><img src="./lib/轮播插件/images/banner2.jpg" /></a>
						</li>
						<li>
							<a href="#"><img src="./lib/轮播插件/images/banner3.jpg" /></a>
						</li>
						<li>
							<a href="#"><img src="./lib/轮播插件/images/banner4.jpg" /></a>
						</li>
						<li>
							<a href="#"><img src="./lib/轮播插件/images/banner5.jpg" /></a>
						</li>
                        <li>
							<a href="#"><img src="./imags/banner1.jpg" /></a>
						</li>
					</ul>
					<!--数字控制器-->
					<ul class="controls" id="ul3">
						<li class="current">1</li>
						<li>2</li>
						<li>3</li>
						<li>4</li>
						<li>5</li>
                        <li>6</li>
                        <li>7</li>
					</ul>
					<!--按钮控制器-->
					<span class="btnleft"></span>
					<span class="btnright"></span>
				</div>
				<!--轮播结束-->
                    </div>


                         
                        </div>
           
      <!-- 这是录播图区域结束 -->

  <!-- 这是纯图标区域 -->
  <div class="serve">
    <div class="wrapper serve_div1">
       
        <div><img src="./imags/222_11.png" alt=""></div>
        <div><img src="./imags/222_13.png" alt=""></div>
        <div><img src="./imags/222_15.png" alt=""></div>
        <div><img src="./imags/222_17.png" alt=""></div>
   
    </div>
</div>
         <!-- 这是footer区域开始 --> 
         <div class="footer">
            <!-- 这是footer的上边区域 -->
            <div class="wrapper footer_div1 clearfix">
                <ul>
                    <li>
                        <h2>购物指南</h2>
                    </li>
                    <li>购物流程</li>
                    <li>购物流程</li>
                    <li>购物流程</li>
                    <li>购物流程</li>
                </ul>
                <ul>
                 <li>
                     <h2>购物指南</h2>
                 </li>
                 <li>购物流程</li>
                 <li>购物流程</li>
                 <li>购物流程</li>
                 <li>购物流程</li> 
             </ul>
             <ul>
                 <li>
                     <h2>购物指南</h2>
                 </li>
                 <li>订单配送查询</li>
                 <li>订单配送查询</li>
                 <li>订单配送查询</li>
                 <li>订单配送查询</li>
             </ul>
             <ul>
                 <li>
                     <h2>购物指南</h2>
                 </li>
                 <li>自助申请退换货</li>
                 <li>自助申请退换货</li>
                 <li>自助申请退换货</li>
                 <li>自助申请退换货</li>
             </ul>
             <ul>
                 <li>
                     <h2>购物指南</h2>
                 </li>
                 <li>购物流程</li>
                 <li>购物流程</li>
                 <li>购物流程</li>
                 <li>购物流程</li> 
             </ul>
             <div class=" fr footer_logo"><img src="./imags/logo_00.png" alt="加载失败"></div>
            </div>

   <div class="wrapper footer_div2">  
       <p><span>公司简介  &nbsp;|</span> <span>Investor Relations   &nbsp;|</span>   <span>机构销售 &nbsp; |</span> 
         <span>机构销售 &nbsp; |</span>
         <span>机构销售 &nbsp; |</span>
         <span>机构销售  &nbsp;|</span>
         <span>机构销售 &nbsp; |</span>  
         <span>机构销售  &nbsp;|</span></p>
        
       <p>Copyright &copy; 乐购网 2004-2016, All Rights Reserved</p>
   </div>
      </div>
      <script src="./lib/轮播插件/javascripts/slider.js"></script>
      <script type="text/javascript">
        //主轮播图
        $("#bannerInner").tyslide({
            boxh:400,//盒子的高度
            w:1000,//盒子的宽度
            h:370,//图片的高度
            isShow:true,//是否显示控制器
            isShowBtn:true,//是否显示左右按钮
            controltop:0,//控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
            controlsW:20,//控制按钮宽度
            controlsH:20,//控制按钮高度
            radius:10,//控制按钮圆角度数
            controlsColor:"#d7d7d7",//普通控制按钮的颜色
            controlsCurrentColor:"#ff6600",//当前控制按钮的颜色
            isShowNum:true //是否显示数字
        });
    </script>
</body>
</html>